<template>
  <div class="settings">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>个人设置</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-row>
        <el-col :xs="24" :sm="20" :md="15" :lg="15" :xl="15">
          <el-form :model="setForm"  ref="setInfo" label-width="90px">
            <el-form-item label="账号:">
              <input v-model="setForm.userAccount" class="id-tel-input"></input>
            </el-form-item>
            <el-form-item label="姓名:">
              <input v-model="setForm.realName" class="id-tel-input"></input>
            </el-form-item>
            <el-form-item label="手机:">
              <input v-model="setForm.mobilePhone" class="id-tel-input"></input>
            </el-form-item>
            <!--<el-form-item label="媒体名称:" prop="name">-->
              <!--<el-input v-model="setForm.name"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="媒体介绍:" prop="desc">-->
              <!--<el-input type="textarea" v-model="setForm.desc" style="width:50%"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item label="邮箱:" prop="email">-->
              <!--<el-input v-model="setForm.email"></el-input>-->
            <!--</el-form-item>-->
            <!--<el-form-item>-->
              <!--<el-button type="primary"  :loading="isSaveSet" @click="saveSet">保存设置</el-button>-->
            <!--</el-form-item>-->
          </el-form>
        </el-col>
        <el-col :offset="2" :xs="24" :sm="24" :md="4" :lg="4" :xl="4">
          <!--<label for="file" class="avatar-img">-->
            <el-avatar shape="square" fit="cover" :size="200" :src='require("./1.png")'></el-avatar>
            <!--<p>点击图片修改头像</p>-->
          <!--</label>-->
          <!--<input :disabled="isSaveSet" type="file" id="file" ref="fileInput" hidden @change="onInputChange"/>-->
        </el-col>
      </el-row>
    </el-card>
    <!--显示选择的图片-->
    <el-dialog title="修改头像" :visible.sync="setAvatar" :modal-append-to-body="false" width="30%" @opened="onDialogOpened" @closed="onDialogClosed">
      <div class="preview-image-wrap">
        <img :src="previewImg" ref="previewImg" class="preview-image">
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="setAvatar = false">取 消</el-button>
    <el-button type="primary"  :loading="isUpdataPhoto" @click="onUpdataPhoto">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
// 图片裁切器
import '@/styles/cropper.css'
import Cropper from '@/utils/cropper.js'
import globalBus from '@/utils/global-bus.js'
let _this = null
export default {
  name: 'settings',
  components: {},
  props: {},
  data () {
    return {
      setForm: {},
      setRules: {
        name: [
          { required: true, message: '请输入媒体名称', trigger: 'blur' },
          { min: 1, max: 7, message: '请输入1-7个字', trigger: 'blur' }
        ],
        desc: [
          { required: true, message: '请输入媒体介绍', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      },
      setAvatar: false,
      previewImg: '', // 预览图片
      cropper: '', // 裁切器实例
      // 按钮loading
      isSaveSet: false,
      isUpdataPhoto: false
    }
  },
  computed: {},
  watch: {},
  created () {
    _this = this
    _this.setForm = JSON.parse( window.sessionStorage.getItem('userInfo'))
  },
  mounted () {
  },
  methods: {
    /**
       * 选择头像
       */
    onInputChange (e) {
      // input选择图片后预览
      const file = _this.$refs.fileInput
      const blobData = window.URL.createObjectURL(file.files[0])
      _this.previewImg = blobData
      // 解决选择相同文件不触发的问题
      _this.$refs.fileInput.value = ''
      _this.setAvatar = true
    },
    // 第一次初始化后，如果预览裁切的图片发生变化，裁切器默认不更新
    // 如果需要预览的图片发生变化，则要更新裁切器
    // 法一：replace()
    // 法二：destroy() 销毁裁切器，重新初始化
    /**
       * Dialog 打开动画结束时的回调
       */
    onDialogOpened () {
      // 图片裁切器必须基于img进行初始化
      // img必须是可见状态才能正常完成初始化
      const image = _this.$refs.previewImg
      // 初始化
      // 法一
      if (_this.cropper) {
        // _this.previewImg 需要重新裁切的图片路径
        return _this.cropper.replace(_this.previewImg)
      }
      _this.cropper = new Cropper(image, {
        aspectRatio: 1, // 比列
        viewMode: 1, // 默认0 阻止裁剪器移出图片
        dragMode: 'none', // 默认move
        cropBoxMovable: true, // 是否允许移动 默认true
        cropBoxResizable: false, // 是否允许改变裁切器大小
        background: false, // 背景 默认true
        crop (event) {
          console.log(event)
          // console.log(event.detail.x);
          // console.log(event.detail.y);
          // console.log(event.detail.width);
          // console.log(event.detail.height);
          // console.log(event.detail.rotate);
          // console.log(event.detail.scaleX);
          // console.log(event.detail.scaleY);
        }
      })
    },
    /**
       * 法二
       * 对话框关闭销毁cropper
       *Dialog 关闭动画结束时的回调
       */
    onDialogClosed () {
      // _this.cropper.destroy()
    },
    /**
       * 上传裁切后的图片
       */
    onUpdataPhoto () {
      _this.isUpdataPhoto = true
      setTimeout(() => {
        _this.setAvatar = false
        _this.isUpdataPhoto = false
      }, 3000)
      // file 获取的裁剪后的图片地址
      // _this.cropper.getCroppedCanvas().toBlob(file => {
      //   const formData = new FormData()
      //   formData.append('photo', file)
      // 上传头像
      // updataUserPhoto(fd).then((res) => {
      // 上传完成，关闭对话框，更新头像
      // 用服务端返回的地址展示更新较慢，可用当前选中的图片地址
      // const blobData = window.URL.createObjectURL(file)
      // _this.setAvatar = false
      // })
      // })
    },
    /**
       * 保存设置
       */
    saveSet () {
      _this.$refs.setInfo.validate((val) => {
        if (!val) {
          return _this.$message.error('请完善信息')
        }
        _this.isSaveSet = true
        setTimeout(() => {
          _this.isSaveSet = false
          // 非父子组件通信方法
          // 注意：适合任意组件间通信
          // 利用$emit触发自定义事件（setUserInfo）并传参
          globalBus.$emit('setUserInfo', { name: _this.setForm.name })
          _this.$message.success('保存成功')
        }, 3000)
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .avatar-img {
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    align-items: center;
  }

  .id-tel-input {
    border: none;
    outline: none;
  }

  .preview-image-wrap {
    .preview-image {
      display: block;
      max-width: 100%;
      height: 200px;
    }
  }

</style>
